<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>启动</title>
  <link href="/static/css/bootstrap.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="/static/include/css/style.css">
  <style>
    .form-table .t-a-c {
      text-align: center;
    }
  </style>
</head>
<body class="white-bg" style="height: 95%">

<div>
  <table class="form-table">

    <tr id="nextTaskOPt" style="display: none"></tr>

    <tr id="rejectNode" style="display: none">
      <th>
        <span>指定驳回节点：</span>
      </th>
      <td>
        <select id="rejectNodeSelect" class="form-control" style=" width: 150px;display: inline-block;">
          <option value="">请选择</option>
        </select>
        <span class="text-muted">若不指定,则默认根据驳回的配置进行跳转 </span>
      </td>
    </tr>

    <tr>
      <th>
        <span>备注/意见：</span>
      </th>
      <td>
        <textarea id="remark" style="resize: none;" rows="4" cols="20" class="form-control"></textarea>
      </td>
    </tr>

    <tr>
      <th>常用语：</th>
      <td>
        <a class="btn btn-outline btn-primary btn-sm mr5" onclick="commonWord('同意')">同意</a>
        <a class="btn btn-outline btn-primary btn-sm mr5" onclick="commonWord('请注意，情况复杂！')">请注意，情况复杂！</a>
        <a class="btn btn-outline btn-primary btn-sm mr5" onclick="commonWord('情况紧急，请尽快处理！')">情况紧急，请尽快处理！</a>
        <a class="btn btn-outline btn-primary btn-sm mr5" onclick="commonWord('驳回')">驳回</a>
      </td>
    </tr>
  </table>
</div>

<script id="nextTaskTpl" type="text/html">
  <th title="注意，1：用户可以不选择候选人，系统会自动根据配置计算；2：当后续有多个节点时，系统会列举出来每个节点的节点候选人，用户可以配置不同节点的候选人。" style="min-width: 130px;">
    下步任务配置：
  </th>
  <td>
    <table class="table-condensed" style="margin-bottom: 0px">
      {{# if(d.nodeNameMap ){ }}
      <tr>
        <th class="col-xs-3 t-a-c" title="您可以指定下一步任务节点，如果不指定会使用系统默认设定的规则来判断流转" style="min-width: 130px;">
          {{# if(d.freeSelectNode ){ }}
          <span>指定</span>
          {{# } }}
          下一步任务节点
        </th>
        {{# if(d.type == 'no' ){ }}
        <th class="col-xs-2 t-a-c">预算候选人</th>
        {{# } else { }}
        <th class="col-xs-2 t-a-c" title="您可以指定下一步任务的候选人，如果不指定会使用系统默认设定的任务候选人">指定候选人</th>
        <th class="col-xs-7 t-a-c">已选候选人</th>
        {{# } }}
      </tr>
      {{# } }}

      {{# layui.each(d.nodeNameMap, function(key,val){ }}
      <tr>
        <td class="col-xs-3">
          <label>
            {{# if(d.freeSelectNode ){ }}
            <span>
              {{# if(!d.multiple ){ }}
              <input type="radio" name="freeSelectNode" value="{{key}}"/>
              {{# } else { }}
              <input type="checkbox" name="freeSelectNode" value="{{key}}"/>
              {{# } }}
            </span>
            {{# } }}
            {{val}}
          </label>
        </td>
        <!-- 预算候选人 -->
        {{# if(d.type == 'no' ){ }}
        <td class="col-xs-2">
          {{# layui.each(d.nodeIdentitysMap[key], function(index,item){ }}
          <span> {{item.name}} &nbsp;&nbsp;&nbsp;&nbsp;</span>
          {{# }); }}
        </td>
        {{# } else { }}
        <!-- 节点人员 -->
        <td class="col-xs-2">
							<span>
								<select class="form-control" style="width: 130px;" onchange="addUser(this,'{{key}}')">
									<option value="">请选择</option>

                  {{# layui.each(d.nodeIdentitysMap[key], function(index,item){ }}
                  <option value="{{item.id}}">{{item.name}}</option>
                  {{# }); }}
								</select>
							</span>
        </td>

        <td class="col-xs-7">
          <span id="{{key}}SelectUser"></span>
          <span id="{{key}}SelectUserOther"></span>
          {{# if(d.type=='allUser' ){ }}
          <span>
            <span class="btn  btn-sm btn-primary fa fa-search mt2" onclick="selectUser('{{key}}')">选择</span>
          </span>
          {{# } }}
        </td>
        {{# } }}
      </tr>
      {{# }); }}

    </table>
  </td>
</script>


<script src="/static/include/js/footer.js"></script>
<script>
  var option = parent.window.nowButton
  var nodeData;
  $(function () {
    if ("agree,oppose,start".indexOf(option.alias) != -1) {
      var ii = layer.load();
      parent.window.nowButton.configPage = ''
      var data = parent.window.postFn(parent.window.nowButton, true)
      $.ajax({
        url: api + '/scabpm/bpm/task/handleNodeFreeSelectUser',
        data: JSON.stringify(data),
        type: "post",
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
        },
        success: function (res) {
          layer.close(ii);
          var result = JSON.parse(res).data
          nodeData = result
          renderTpl('nextTaskTpl', result, 'nextTaskOPt')

          if (!((result.type && result.type != 'no') || result.freeSelectNode)) {
            $('#nextTaskOPt').remove()
          }else{
            $('#nextTaskOPt').show()
          }


         /* if (result.freeSelectNode && !result.multiple) {//默认选择
            Object.keys(result.nodeNameMap).forEach(function (key) {
              // parent.window.bpmParams.destination = key
            })
          }*/

        },
        error: function (e) {
          layer.close(ii);
        }
      })


    }


    if ("reject,reject2Start".indexOf(option.alias) != -1) {
      var ii = layer.load();
      parent.window.nowButton.configPage = ''
      $.ajax({
        url: api + '/scabpm/bpm/task/getCanBackHistoryNodes',
        data: {taskId: parent.window.taskId},
        type: "post",
        success: function (res) {
          layer.close(ii);
          var result = JSON.parse(res).data
          if (result) {
            $('#rejectNode').show()
            Object.keys(result).forEach(function (item) {
              $('#rejectNodeSelect').append('<option value="'+item+'">'+result[item]+'</option>')
            })

          }

        },
        error: function (e) {
          layer.close(ii);
        }
      })

    }



  })

  var userRows = {}
  function selectUser(name) {
    var url = '/pages/bpm/agent/userTable';
    var options = {
      title: '选择用户',
      url: url,
      callBack: function (index, layero) {
        var iframeWin = window[layero.find('iframe')[0]['name']];
        var rows = iframeWin.$('#bootstrap-table').bootstrapTable('getSelections');
        userRows[name] = []
        rows.forEach(function (row) {
          userRows[name].push({
            name: row.username,
            id: row.user_id,
            type: 'user'
          })
        })
        formatSr(name)
        layer.close(index);
      }
    };
    var userIds = []
    if (userRows[name] && userRows[name].length){
      userRows[name].forEach(function (user) {
        userIds.push(user.id)
      })
    }

    $.modal.openOptionsInitData(options, userIds);
  }


  function formatSr(name) {
    $("#"+name+"SelectUser").empty()
    userRows[name].forEach(function (user) {
      $("#"+name+"SelectUser").append('<span class="user-btn btn btn-default btn-xs" style="margin-right: 5px;" data-id="\''+user.id+'\'">' +
        '' + user.name +
        '<a href="javascript:void(0)" class="btn btn-link btn-xs" onclick="removeUser(this,\''+user.id+'\',\''+name+'\')">×</a>' +
        '</span>')
    })

  }
  function removeUser(obj,id,name) {
    $(obj).parent().remove()
    userRows[name].forEach(function (user,index) {
      if (user.id == id){
        userRows[name].splice(index,1)
      }
    })
  }

  function removeUserOther(obj,id,name) {
    $(obj).parent().remove()
    userOther[name].forEach(function (user,index) {
      if (user.id == id){
        userOther[name].splice(index,1)
      }
    })
  }

  var userOther = {}
  function addUser(obj, name) {
    userOther[name] = []
    var username = $(obj).find('option:selected').text()
    var userid = $(obj).val()
    if (!userid) return false
    userOther[name].push({
      name: username,
      id: userid,
      type: 'user'
    })
    $("#"+name+"SelectUserOther").empty()
    $("#"+name+"SelectUserOther").append('<span class="user-btn btn btn-default btn-xs" style="margin-right: 5px;" data-id="\''+userid+'\'">' +
      '' + username +
      '<a href="javascript:void(0)" class="btn btn-link btn-xs" onclick="removeUserOther(this,\''+userid+'\',\''+name+'\')">×</a>' +
      '</span>')
  }

  function commonWord(text) {
    $('#remark').val(text)
  }

  function submitHandler() {
    // var iframeObj = window.frames["iframeContent"].window
    parent.window.nowButton.opinion = $('#remark').val()
    if ("agree,oppose,start".indexOf(option.alias) != -1){
      var submitData = {}
      if (nodeData.freeSelectNode){
        if (nodeData.multiple){
          var nodes = []
          $("input[name='freeSelectNode']:checked").each(function(i){
            nodes.push($(this).val())
          })
          submitData.destination  = nodes.join(',')
        }else{
          submitData.destination = $('input[name=freeSelectNode]:checked').val()
        }

      }else{
        Object.keys(userRows).forEach(function(item){
          if (userOther[item] && userOther[item].length){
            userRows[item] = userRows[item].concat(userOther[item])
          }

        })
        submitData.nodeUsers = userRows
      }
      parent.window.bpmParams = Object.assign({}, parent.window.bpmParams, submitData)
    }

    if ("reject,reject2Start".indexOf(option.alias) != -1){
      parent.window.bpmParams = Object.assign({}, parent.window.bpmParams, {destination: $('#rejectNodeSelect').val()})
    }

    parent.window.nowButton.configPage = ''
    // var busData = iframeObj.getData ? iframeObj.getData() : {};
    parent.window.postFn(parent.window.nowButton)
  }
</script>
</body>
</html>
